.playingpages{
    height: 100vh;
    position: relative;
    overflow: hidden;
    .playing_background{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height:1800rpx;
        overflow: hidden;
        z-index: 1;
        .playing_background_one{
            position: relative;
            width: 750rpx;
            height: 1800rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color:#3c3c3c;
            image{
                position: absolute;
                display: block;
                width: 115%;
                height: 115%;
                filter: blur(60rpx);
                opacity: 0.7;
            }
        }
        .playing_background_two{
            width: 750rpx;
            height: 1800rpx;       
        }
    }
    .playing_zz{
        position: absolute;
        z-index: 3;
        top:-70rpx;
        left: 40%;
        transform-origin: 70rpx 70rpx;
        transform: rotate(-30deg);
        transition: all 0.9s;
        image{
            width: 250rpx;
        }
    }
    .playing_zz_play{
        transform: rotate(0deg);
    }
    .playing_backround{
        position: absolute;
        width: 750rpx;
        height: 750rpx;
        top: 15vh;
        left: 60%;
        transform: translateX(-50%);
        z-index: 2;
        .paly_max{
            width: 80%;
            animation: disc 20s linear infinite;
        }
        .play_min{
            position: absolute;
            top: 23%;
            left: 23%;
            width: 35%;
            height: 35%;
            border-radius: 50%;
            transform: translateX(50%);
            animation: disc 20s linear infinite;               
        }
        @keyframes disc{
            from {-webkit-transform: rotate(0deg);}
            to {-webkit-transform: rotate(360deg);}
        }
    }
    .playing_info{
        width: 100%;
        position: absolute;
        z-index: 4;
        padding: 0 50rpx 0 50rpx;
        bottom: 15%;
        left: 0;
        display: flex;
        align-items: center;
        .playing_info_icon{
            flex: 1;
            image{
                width: 60%;
                transform: translateX(40%);
            }
        }
    }
    .playing_progress{
        position: absolute;
        z-index: 5;
        left: 0;
        bottom: 12%;
        width: 100%;
        padding: 0 20rpx 0 20rpx;
        display: flex;
        align-items: center;
        .playing_progress_time{
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            text{
                font-size: 24rpx;
                color: cornsilk;
            }
        }
        .playing_progress_content{
            flex: 10;
            position: relative;

        }
    }
    .playing_compoents{
        width: 100%;
        position: absolute;
        z-index: 6;
        bottom: 0;
        left: 0;
        display: flex;
        .playing_componets_icon{
            flex: 1;
            display: flex;
            align-items: center;
            image{
                width: 100%;
            }
            .playing_componets_temp{
                width: 70%;
                transform: translateX(15%);
            }
        }
    }
    .play_Relevant{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 450rpx;
        background-color: #b1b4b2;
        opacity: 0.99;
        .play_Relevant_name{
            width: 100%;
            height: 70rpx;
            font-size: 26rpx;
            color:#6e6e6f;
            padding: 20rpx 0 25rpx 20rpx;
            border-bottom:2rpx solid #777777;
        }
        .play_Relevant_info{
            width: 100%;
            height: 300rpx;
            color:#444545;
            border-bottom:3rpx solid #777777;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .play_Relevant_info_item{
                width: 100%;
                padding: 5rpx 0 5rpx 5rpx;               
                navigator{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .play_Relevant_info_item_img{
                        flex: 1;
                        padding-right: 10rpx;
                    }
                    text{
                        flex: 13;
                        border-bottom:2rpx solid #c7c7c7;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }
                }
            }
        }
        .play_Relevant_close{
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .playlist{
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 600rpx;
        background-color: #b1b4b2;
        opacity: 0.99;
        .playlist_title{
            width: 100%;
            height: 70rpx;
            font-size: 26rpx;
            color:#6e6e6f;
            padding: 20rpx 0 25rpx 20rpx;
            border-bottom:2rpx solid #c7c7c7;
        }
        .playlist_scroll-view{
            width: 100%;
            height: 450rpx;
            color:#444545;
            border-bottom:2rpx solid #c7c7c7;
            .playlist_scroll-view_item{
                width: 100%;
                height: 70rpx;
                padding: 15rpx 0 15rpx 20rpx;
                border-bottom:2rpx solid #c7c7c7;
                display: flex;
                align-items: center;
            }
            .active{
                color: #d94f43;
            }
        }
        .playlist_close{
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}